<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>价格纠错/分享</title>
    <!-- 采买任务引入了此样式,版号要一起修改 -->
    <link rel="stylesheet" type="text/css" href="css/shareAndCorrection20190718.css">
    <link rel="stylesheet" type="text/css" href="/js/cube-ui/cube.min.css"/>
    <link rel="stylesheet" type="text/css" href="/js/mint-ui/mint-ui.css" />

</head>
<body>
    <div class="app-shell" id="shareAndCorrection" v-cloak>
        <div class="shareAndCorrection-main">
            <div class="shareAndCorrection-header"><i class="shareAndCorrection-goback" @click="goback()">返回</i>{{headerTitle}}<span  v-if="showType!=2" class="shareAndCorrection-btnHistory" @click="showHistory">{{headerRight_btn}}</span></div>

            <!-- 价格纠错/分享商品列表页 -->
            <div class="shareAndCorrection-container" v-if="showType === 0">
                <div class="shareAndCorrection-marketBox">
                    <div class="shareAndCorrection-market">{{market.marketName}}</div>
                    <div class="shareAndCorrection-changeMarket" @click="changeMarket">修改超市</div>                    
                </div>

                <div class="shareAndCorrection-selectBox">                
                    <div class="shareAndCorrection-tabSelect" v-for="(item,index) in tabTitle" @click="changeType(index)">
                        <span class="shareAndCorrection-tabSelect" :class="tabTitleIndex == index ? 'shareAndCorrection-selectTitle' :''">
                            {{item.title}}
                        </span>
                    </div>
                    <div class="cube-tab shareAndCorrection-screenBox">
                        <span :class="tabTitleIndex === 2 ? 'shareAndCorrection-screenActive':'shareAndCorrection-screen'" @click="screenPopup">筛选</span>
                    </div>
                </div>

            <div :class="tabTitleIndex === 0 ? 'shareAndCorrection-m':'shareAndCorrection-div'">
                <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="4">
                    <div class="shareAndCorrection-listMain" v-for="(item,index) in listData" @click="toDetails(item,index)">
                            <div class="shareAndCorrection-numbering">任务编号：{{item.taskId}}<span class="shareAndCorrection-date">{{tabTitleIndex === 1 && item.createTime.length!=undefined ? item.createTime: ''}}</span></div>
                                <div class="shareAndCorrection-infoBox">
                                    <label v-if="tabTitleIndex === 0" for="" class="shareAndCorrection-lab"><input
                                            @change="changeOne($event,item.taskId)" type="checkbox"
                                            :checked="checkModel.indexOf(item.taskId)>-1" class="shareAndCorrection-checkBox"></label>
                                    <img :src="item.goodsImage" alt="" class="shareAndCorrection-image">
                                    <div class="shareAndCorrection-infoBoxRight">
                                        <p class="shareAndCorrection-finishedName">{{item.fullName}}</p>
                                        <div class="shareAndCorrection-infoNum">    
                                            <div class="shareAndCorrection-completeQuantity">{{item.barcode?"条形码："+item.barcode:''}}</div>
                                            <div class="shareAndCorrection-completeQuantity">提成金额：￥{{item.royaltyAmount?item.royaltyAmount/100:''}}元</div>
                                            <div class="shareAndCorrection-noPrice">{{item.price?"￥"+item.price/100+'元':'暂无价格'}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>                        
                    </div>                
                </div>     
                <!-- TODO -->
                <div class="shareAndCorrection-selectAll" v-show = "tabTitleIndex === 0">
                    <label class="shareAndCorrection-change-btn" ><input type="checkbox" @click="changeAllState" v-model.trim="checkedAll" class="shareAndCorrection-checkBox">{{checkModel.length === 0? "  全选":"  已选  "+checkModel.length}}</label>
                    <span class="shareAndCorrection-btn" @click="checkModel.length>0 && postTaskId()">抢单</span>
                </div>
            </div>

            <!-- 纠错/分享历史页面-->
            <div class="shareAndCorrection-containerHistory" v-if="showType === 1">
                <div class="shareAndCorrection-marketBox">
                    <div class="shareAndCorrection-market">{{market.marketName}}</div>
                    <div class="shareAndCorrection-changeMarket" @click="changeMarket">修改超市</div>                    
                </div>
                <cube-scroll
                ref="historyData"
                :data="historyData"     
                :options="scrollOptions"
                @pulling-up="historyDataMore">
                <ul class="shareAndCorrection-auditListHistoryBox" v-if="historyData && historyData.length > 0">
                    <li class="shareAndCorrection-auditListHistory" v-for="(history, index) in historyData" :key="index">
                        <div class="shareAndCorrection-auditListHeader">
                            <span>{{history.createTime}}</span>
                            <span class="shareAndCorrection-auditListStatus" v-if="history.dealStatus">{{history.dealStatus === 'DEAL_SUCCESS'?'处理成功':'处理失败'}}</span>
                        </div>
                        <div class="shareAndCorrection-auditGoodsBox">
                            <img :src="history.goodsImage" class="shareAndCorrection-auditGoodsImg">
                            <div class="shareAndCorrection-auditGoodsInfo">
                                <h1 class="shareAndCorrection-auditGoodsName">{{history.fullName}}</h1>
                                <div class="shareAndCorrection-priceBox">
                                    <p>价格：{{history.priceAudit?"￥"+history.priceAudit/100+"元":"暂无价格"}}<span class="shareAndCorrection-barcode">{{history.barcode?"条形码："+history.barcode:""}}</span></p>
                                    <p>超市：{{history.supermarkerName}}</p>
                                </div>
                                <!-- <button class="shareAndCorrection-historyBtn" v-if="history.historyButtonType === 'RECALL'" @click="revokePrice(index)">撤销价格</button>
                                <button class="shareAndCorrection-historyBtn" v-else-if="history.historyButtonType === 'VIEW'" @click="viewPrice(index)">查看价格</button>
                                <button class="shareAndCorrection-historyBtn" v-else-if="history.historyButtonType === 'CORRECT'" @click="errorCorrection(index)">价格纠错</button> -->
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="shareAndCorrection-noHistory" v-else-if="historyData && historyData.length === 0">暂无历史</div>
                </cube-scroll>
            </div>

            <!-- 纠错/分享提交页面 -->
            <div class="shareAndCorrection-priceCorrection" :class="showType === 2? 'shareAndCorrection-containerActive':'shareAndCorrection-container'" v-else-if="showType === 2">
                <div class="shareAndCorrection-listMain">
                    <div class="shareAndCorrection-numbering">任务编号：{{listData[skuInfo.index].taskId}}
                        <span class="shareAndCorrection-date">{{listData[skuInfo.index].createTime}}</span>
                    </div>
                    <div class="shareAndCorrection-infoBox">
                        <img :src="skuInfo.goodsImage" alt="" class="shareAndCorrection-image">
                        <div class="shareAndCorrection-infoBoxRight">
                            <p class="shareAndCorrection-finishedName">{{listData[skuInfo.index].fullName}}</p>
                            <div class="shareAndCorrection-infoNum">
                                <div class="shareAndCorrection-completeQuantity">{{listData[skuInfo.index].barcode?"条形码："+ listData[skuInfo.index].barcode:''}}</div>
                                <div class="shareAndCorrection-completeQuantity">提成金额：￥{{listData[skuInfo.index].royaltyAmount?listData[skuInfo.index].royaltyAmount/100:''}}元</div>
                                <div class="shareAndCorrection-noPrice">{{listData[skuInfo.index].price?"￥"+listData[skuInfo.index].price/100+'元':'暂无价格'}}</div>
                            </div>                            
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li class="shareAndCorrection-correctionListLi"><span class="shareAndCorrection-correctionListLiLeft">价格类型：</span><div class="shareAndCorrection-correctionListLiRight" @click="choicePriceType">{{params.type}}</div></li>
                        <li class="shareAndCorrection-correctionListLi"><span class="shareAndCorrection-correctionListLiLeft">开始时间：</span><div class="shareAndCorrection-correctionListLiRight" @click="choiceStartAndEndTime">{{params.startTime}}</div></li>
                        <li class="shareAndCorrection-correctionListLi"><span class="shareAndCorrection-correctionListLiLeft">结束时间：</span><div class="shareAndCorrection-correctionListLiRight" @click="choiceStartAndEndTime">{{params.endTime}}</div></li>
                        <li class="shareAndCorrection-correctionListLi"><span class="shareAndCorrection-correctionListLiLeft">{{listData[skuInfo.index].price?'纠错价格：':'分享价格：'}}</span><input type="number" class="shareAndCorrection-correctionListLiRight" v-model="showPrice" ></li>
                    </ul>
                </div>
                <!-- <div class="shareAndCorrection-correctionUploadBox">
                    <div class="shareAndCorrection-correctionImgBox">
                        <input type="file" class="shareAndCorrection-uploadFile" @change="showImage($event)" ref="uploadFile" multiple accept="image/*"/>
                        <span class="shareAndCorrection-uploadText">点击上传照片</span>
                        <img :src="imageSrc" v-if="imageSrc" class="shareAndCorrection-imagePrview"/>
                    </div>
                </div> -->
                <div class="shareAndCorrection-submitDiv">
                    <button class="shareAndCorrection-btnSubmit" @click="notGoodsSku">无此商品</button>
                    <button class="shareAndCorrection-btnSubmit" 
                        :primary="true" 
                        :disabled="btnDisabled" 
                        @click="shareAndCorrectionSubmit">{{listData[skuInfo.index].price === showPrice*100
                            &&dateFormat(listData[skuInfo.index].startTime) === params.startTime
                                &&dateFormat(listData[skuInfo.index].endTime) === params.endTime
                                    &&transformType(listData[skuInfo.index].startType) === params.type?"价格正确":'完成'}}</button>
                </div>
            </div>
            <div v-show="pop.show" class="shareAndCorrection-popupMask" @click="pop.show = false"></div>
            <div class="shareAndCorrection-pop" v-show ="pop.show">
                <h2 class="shareAndCorrection-popTitle">提示</h2>
                <p class="shareAndCorrection-popContent">恭喜你！你已经成功抢到{{pop.grabSheetPass}}条任务，有另外{{pop.grabSheetNot}}条已经被其他用户抢到。</p>
                <div class="shareAndCorrection-popConfirm" @click="pop.show = false">确定</div>
            </div>             
            
            <!-- 选择超市 -->
            <cube-popup type="my-popup" position="right" :mask-closable="true" ref="choiceMarket">
                <div class="shareAndCorrection-choiceMarketBox">
                    <div class="shareAndCorrection-choiceMarketTitle">选择超市</div>
                    <div class="shareAndCorrection-choiceMarketInputBox">
                        <input type="text" class="shareAndCorrection-choiceMarketInput" v-model="marketKey" placeholder="请输入超市名" >
                    </div>
                    <div class="shareAndCorrection-marketListBox">
                        <cube-scroll ref="marketData" :data="marketData" :options="scrollOptions" @pulling-up="marketDataMore">
                            <ul v-if="marketData && marketData.length > 0">
                                <li class="shareAndCorrection-marketList" v-for="(item,index) in marketData" :key="index" @click="choiceMarket(item)">
                                    <h1 class="shareAndCorrection-marketName" v-html="item.name"></h1>
                                    <p class="shareAndCorrection-marketAddress">{{item.fullName}}</p>
                                </li>
                            </ul>
                            <div class="shareAndCorrection-noMarket" v-else-if="marketData && marketData.length === 0">暂无结果</div>
                        </cube-scroll>
                    </div>
                </div>
            </cube-popup>            

            <!-- 右侧筛选弹窗 -->
            <cube-popup type="my-popup" position="right" :mask-closable="true" ref="screenPopup">
                <div class="auditPrice-btnDiv">
                    <button class="auditPrice-btn" @click="filter('null')">全部任务</button>
                    <button class="auditPrice-btn" @click="filter('CORRECT')">价格纠错</button>
                    <button class="auditPrice-btn" @click="filter('SHARE')">价格分享</button>
                </div>  
                <button class="auditPrice-choiceCategoryBox">
                    <div class="auditPrice-queryInputBox">                          
                        <cube-scroll ref="categoryData" :data="categoryData" :options="scrollOptions">
                            <ul>
                                <li v-for="item in categoryData" :key="item.value" class="auditPrice-categoryBox">
                                    <div class="auditPrice-categoryH1">{{item.name}}</div>
                                    <div class="auditPrice-categoryH2Box">
                                        <span class="auditPrice-categoryH2" v-for="cate in item.children" :key="cate.value" :class="[cate.categoryId === categoryId ? 'auditPrice-categoryH2Active' : '']" @click="clickCategory(cate)">{{cate.name}}</span>
                                        <div class="auditPrice-hack"></div>
                                    </div>
                                </li>
                            </ul>
                        </cube-scroll>
                    </div>
            
                </button>
            </cube-popup>

            <!-- 右侧筛选弹窗 -->
            <!-- <cube-popup type="my-popup" position="right" :mask-closable="true" ref="screenPopup">
                <div class="shareAndCorrection-choiceMarketBox">
                    <div class="shareAndCorrection-choiceMarketTitle">品牌</div>
                    <div class="shareAndCorrection-queryInputBox shareAndCorrection-queryBandBox">
                        <input type="text" class="shareAndCorrection-queryInput" v-model="brandName" placeholder="请输入品牌名" @input="getBrandFocus">
                        <div class="shareAndCorrection-queryBrandList" v-show="brandData && brandData.length > 0">
                            <ul>
                                <li class="shareAndCorrection-queryBrand" v-for="(brand,index) in brandData" :key="index" @click="changeBrand(brand)">{{brand.name}}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="shareAndCorrection-choiceMarketTitle">商品</div>
                    <div class="shareAndCorrection-queryInputBox">
                        <input type="text" class="shareAndCorrection-queryInput" v-model="fullName" placeholder="请输入商品名">
                    </div>
                    <div class="shareAndCorrection-choiceMarketTitle">规格</div>
                    <div class="shareAndCorrection-queryInputBox">
                        <input type="text" class="shareAndCorrection-queryInput" v-model="valueName" placeholder="请输入规格名">
                    </div>
                    <div class="shareAndCorrection-choiceMarketTitle">条形码</div>
                    <div class="shareAndCorrection-queryInputBox">
                        <input type="text" class="shareAndCorrection-queryInput" v-model="barcode" placeholder="请输入条形码">
                    </div>
                    <div class="shareAndCorrection-choiceMarketTitle">商品分类</div>
                    <div class="shareAndCorrection-queryInputBox">
                        <cube-select class="shareAndCorrection-select"
                            v-model="categoryName"
                            placeholder="请选择商品分类"
                            :options="categoryData"
                            @change="changeSelect">
                        </cube-select>
                    </div>
                    <button class="shareAndCorrection-queryBtnReset" @click="btnReset">重置</button>
                    <button class="shareAndCorrection-queryBtnOk" @click="btnSubmit">确定</button>
                </div>
            </cube-popup> -->

            <cube-popup type="my-popup" position="bottom" :mask-closable="true" ref="viewPrice">
                <div class="shareAndCorrection-viewPriceBox" v-if="priceData">
                    <div class="shareAndCorrection-viewPriceTitle"><span v-if="priceData.status === 'RECALL'">价格已撤销</span><span v-else-if="priceData.status === 'EXPIRED'">价格已过期</span><span v-else-if="priceData.status === 'AUDIT_FAIL'">价格审核失败</span></div>
                    <div class="shareAndCorrection-viewPriceList">价格类型：{{priceData.priceTypeForCha}}</div>
                    <div class="shareAndCorrection-viewPriceList">开始时间：{{priceData.strStartTime}}</div>
                    <div class="shareAndCorrection-viewPriceList">结束时间：{{priceData.strEndTime}}</div>
                    <div class="shareAndCorrection-viewPriceList">纠错价格：{{priceData.price}}元</div>
                </div>
            </cube-popup>
            <!-- tips -->
            <div class="toast-container" v-if="errMsg">
                <div class="toast"><span v-html="errMsg"></span></div>
            </div>  
        </div>
    </div>

<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/fetch20190612.js"></script>
<script src="../js/rem.js"></script>
<script src="../js/cube-ui/cube.min.js"></script>
<script type="text/javascript" src="/js/mint-ui/mint-ui.js"></script>
<script src="js/shareAndCorrection20190718.js"></script>
</body>
</html>
